<template>
	<!-- 个人中心 -->
	<view class="container">
		<!-- 用户信息 -->
		<view class="user">
			<view class="user-header">
				<!-- 已登录 -->
				<view v-if=" isLogin " class="user-header-cont">
					<view class="user-header-avatar">
						<!-- H5不兼容 -->

						<image v-if="userInfo.avatarUrl" style="display: initial;" class="header" :src="userInfo.avatarUrl"></image>
						<image v-else class="header1" src="../../static/img/face1.png"></image>
						<!-- <open-data class="" lang="zh_CN" type="userAvatarUrl"></open-data> -->

					</view>
					<view class="user-header-right">
						<!-- 微信昵称 -->
						<!-- <open-data class="user-header-cont-name" lang="zh_CN" type="userNickName"></open-data> -->
						<text class="user-header-cont-name" v-if="nameshow" @click="getname">{{ userInfo.nickName }}</text>
						<input class="user-header-cont-name" focus='true' style="background:#fff;" v-else type="text" @blur="setname"
						 :value="userInfo.nickName ">
						<!-- 会员等级 -->
						<view v-if=" userInfo.grade_id > 0 " class="user-header-grade dis-flex flex-y-center">
							<view class="user-grade_icon">
								<image src="../../static/img/grade_icon.png"></image>
							</view>
							<view class="user-grade_name">
								<text>{{ userInfo.grade.name }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 未登录 -->
				<view v-else class="user-header-cont">
					<view class="user-header-avatar">
						<image class="header1" src="../../static/img/default-avatar.jpg"></image>
					</view>


					<!-- #ifdef MP-WEIXIN -->
					<button style="margin:0;font-size:16px;background:none;color:#000" open-type="getUserInfo" lang="zh_CN"
					 @getuserinfo="onLogin">点击登录</button>
					<!-- #endif -->

					<!-- #ifdef APP-PLUS -->
					<button style="margin:0;font-size:16px;background:none;color:#000" open-type="getUserInfo" lang="zh_CN" @tap="onLogin">点击登录</button>
					<!-- #endif -->
				</view>
			</view>
			<!-- 订单导航栏 -->
			<view class="order-navbar">
				<form @submit="onTargetOrder" data-type="all" report-submit="true">
					<button form-type="submit" class="btn-normal">
						<view class="order-navbar-header dis-flex">
							<text class="f-30">我的订单</text>
							<view class="dis-flex flex-y-center">
								<text class="f-24 col-6">全部订单</text>
								<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
							</view>
						</view>
					</button>
				</form>
				<view class="order-navbar-footer dis-flex m-top10">
					<view class="order-navbar-item flex-box">
						<form @submit="onTargetOrder" data-type="all" report-submit="true">
							<button form-type="submit" class="btn-normal">
								<text class="order-navbar__icon iconfont icon-form"></text>
								<text class="order-navbar__name">全部订单</text>
							</button>
						</form>
					</view>
					<view class="order-navbar-item flex-box">
						<form @submit="onTargetOrder" data-type="payment" report-submit="true">
							<button form-type="submit" class="btn-normal">
								<text class="order-navbar__icon iconfont icon-daifukuan"></text>
								<text class="order-navbar__name">待付款</text>
								<text class="order-badge" v-if="orderCount.payment > 0">{{orderCount.payment}}</text>
							</button>
						</form>
					</view>
					<view class="order-navbar-item flex-box">
						<form @submit="onTargetOrder" data-type="received" report-submit="true">
							<button form-type="submit" class="btn-normal">
								<text class="order-navbar__icon iconfont icon-daishouhuo"></text>
								<text class="order-navbar__name">待收货</text>
								<text class="order-badge" v-if="orderCount.received > 0">{{orderCount.received}}</text>
							</button>
						</form>
					</view>
					<view class="order-navbar-item flex-box">
						<form @submit="onTargetOrder" data-type="refund" report-submit="true">
							<button form-type="submit" class="btn-normal">
								<text class="order-navbar__icon iconfont icon-shouhou"></text>
								<text class="order-navbar__name">退款/售后</text>
								<text class="order-badge" v-if="orderCount.refund > 0">{{orderCount.refund}}</text>
							</button>
						</form>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的钱包 -->
		<view class="my-asset dis-flex">
			<view class="asset-left flex-box dis-flex flex-x-center">
				<view class="asset-left_item">
					<form @submit="onTargetWallet" report-submit="true">
						<button form-type="submit" class="btn-normal">
							<view class="item-value dis-flex flex-x-center">
								<text>{{ isLogin ? userInfo.balance : '0.00' }}</text>
							</view>
							<view class="item-name dis-flex flex-x-center">
								<text>账户余额</text>
							</view>
						</button>
					</form>
				</view>
				<view class="asset-left_item">
					<form @submit="onTargetPoints" report-submit="true">
						<button form-type="submit" class="btn-normal">
							<view class="item-value dis-flex flex-x-center">
								<text>{{ isLogin ? userInfo.points : 0 }}</text>
							</view>
							<view class="item-name dis-flex flex-x-center">
								<text>可用{{ isLogin ? setting.points_name : '' }}</text>
							</view>
						</button>
					</form>
				</view>
			</view>
			<view class="asset-right">
				<view class="asset-right_item">
					<form @submit="onTargetWallet" report-submit="true">
						<button form-type="submit" class="btn-normal">
							<view class="item-icon dis-flex flex-x-center">
								<text class="iconfont icon-qianbao"></text>
							</view>
							<view class="item-name dis-flex flex-x-center">
								<text>我的钱包</text>
							</view>
						</button>
					</form>
				</view>
			</view>
		</view>
		<!-- 菜单列表 srjc-->
		<view class="menus-list">
			<form v-for=" (item,index) in menus" :key="index" @submit="onTargetMenus" :data-url="item.url" report-submit="true">
				<button form-type="submit" class="btn-normal">
					<view class="menus-item dis-flex b-f">
						<view class="menus-item__left flex-box dis-flex flex-y-center">
							<text class="iconfont f-34" :class="['icon-' + item.icon]"> </text>
							<text class="menus-item__name f-30">{{ item.name }}</text>
						</view>
						<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center">
							<text class="iconfont icon-xiangyoujiantou f-26 col-7"></text>
						</view>
					</view>
				</button>
			</form>

			<!-- #ifdef APP-PLUS -->
			<button form-type="submit" class="btn-normal" @tap="openkefu()">
				<view class="menus-item dis-flex b-f">
					<view class="menus-item__left flex-box dis-flex flex-y-center">
						<text class="iconfont f-34 icon-help"> </text>
						<text class="menus-item__name f-30">联系QQ</text>
					</view>
					<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center">
						<text class="iconfont icon-xiangyoujiantou f-26 col-7"></text>
					</view>
				</view>
			</button>
			<!-- APP专属版本更新页 -->
			<button form-type="submit" class="btn-normal" @tap="onupdataAPP()">
				<view class="menus-item dis-flex b-f">
					<view class="menus-item__left flex-box dis-flex flex-y-center">
						<text class="iconfont f-34 icon-shijian"> </text>
						<text class="menus-item__name f-30">版本更新</text>
					</view>
					<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center">
						<text class="iconfont icon-xiangyoujiantou f-26 col-7"></text>
					</view>
				</view>
			</button>
			<!-- #endif -->
			<button v-if=" isLogin " form-type="submit" class="btn-normal" @tap="outlogin()">
				<view class="menus-item dis-flex b-f">
					<view class="menus-item__left flex-box dis-flex flex-y-center">
						<text class="iconfont f-34 icon-delete"> </text>
						<text class="menus-item__name f-30">切换账号</text>
					</view>
					<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center">
						<text class="iconfont icon-xiangyoujiantou f-26 col-7"></text>
					</view>
				</view>
			</button>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				isLogin: false,
				nameshow: true,
				couponCount: {},
				userInfo: {},
				menus: {},
				orderCount: {},
				setting: {},
				userAvatarUrl: '',
			}
		},
		onLoad() {
			if (this.isDubug) {
				uni.setStorageSync('token',this.isDubugToken)
				uni.setStorageSync('user_id',111)
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let _this = this;
			_this.setData({
				isLogin: _this.checkIsLogin()
			});
			if (_this.isLogin) {
				// 获取当前用户信息
				_this.getUserDetail();
			}
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			uni.stopPullDownRefresh();
		},

		methods: {
			wxlogin: function() {
				let _this = this;
				// if (e.detail.errMsg !== 'getUserInfo:ok') {
				// 	return false;
				// }
				uni.checkSession({
					complete: function(res) {
						console.log(res);
					}
				});
				uni.showLoading({
					title: "正在登录",
					mask: true
				});
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							// 登录
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {

									console.log(JSON.stringify(loginRes));
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {

											console.log('-------获取微信用户所有-----');
											console.log(JSON.stringify(infoRes.userInfo));
											// APP登录
											// #ifdef APP-PLUS
											_this.applogin(loginRes, infoRes);
											// #endif

											// 微信小程序登录
											// #ifdef  MP-WEIXIN
											_this.xcxlogin(loginRes, infoRes);
											// #endif
										},
										fail: function(res) {
											console.log(JSON.stringify(res));
										}
									});
								}
							});
						}
					}
				});
				return false;
			},


			/**
			 * app客服
			 */
			openkefu: function() {
				let url = 'mqqwpa://im/chat?chat_type=crm&uin=' + this.getQQkefu()
				this.openBrowser(url);
			},
			// 获取名称
			getname: function() {
				let _this = this;
				_this.nameshow = false;
			},
			// 退出登录
			outlogin: function() {
				var _this = this;
				this.showModal('是否退出登录？', function() {
					uni.removeStorageSync('token');
					uni.removeStorageSync('user_id');

					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '退出成功'
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 800)
				})

			},
			// 设置名称
			setname: function(e) {
				let _this = this;
				let name = e.detail.value;

				if (name.length == "") {
					_this.setData({
						'userInfo.nickName': _this.userInfo.nickName,
					});
					_this.nameshow = true;
					return;
				}

				_this._get('user.index/setname', {
					name: name
				}, function(result) {
					if (result.data.state === 1) {

						_this.setData({
							'userInfo.nickName': name,
						});
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '昵称修改成功'
						});
					}
				});
				_this.nameshow = true;
			},

			/**
			 * 获取当前用户信息
			 */
			getUserDetail: function() {
				let _this = this;
				let token = uni.getStorageSync('token');
				console.log('token====>' + token);
				_this._get('user.index/detail', {}, function(result) {
					// console.log(result.data);
					_this.setData(result.data);
				});
			},

			/**
			 * 订单导航跳转
			 */
			onTargetOrder(e) {
				// 记录formid
				let _this = this;
				if (!_this.onCheckLogin()) {
					return false;
				}
				_this.saveFormId(e.detail.formId);
				let urls = {
					all: '/pages/order/index?type=all',
					payment: '/pages/order/index?type=payment',
					received: '/pages/order/index?type=received',
					refund: '/pages/order/refund/detail/detail',
				};
				// 转跳指定的页面
				uni.navigateTo({
					url: urls[e.currentTarget.dataset.type]
				})
			},

			/**
			 * 菜单列表导航跳转
			 */
			onTargetMenus(e) {
				let _this = this;
				if (!_this.onCheckLogin()) {
					return false;
				}
				// 记录formId
				_this.saveFormId(e.detail.formId);
				uni.navigateTo({
					url: '/' + e.currentTarget.dataset.url
				})
			},
			/**
			 * 跳转我的钱包页面
			 */
			onTargetWallet(e) {
				// 记录formId
				let _this = this;
				if (!_this.onCheckLogin()) {
					return false;
				}
				_this.saveFormId(e.detail.formId);
				uni.navigateTo({
					url: '/pages/user/wallet/wallet'
				})
			},

			/**
			 * 跳转积分明细页
			 */
			onTargetPoints(e) {
				let _this = this;
				if (!_this.onCheckLogin()) {
					return false;
				}
				// 记录formId
				wx.navigateTo({
					url: '../points/log/index'
				});
			},
			/**
			 * 跳转我的优惠券页面
			 */
			onTargetCoupon(e) {
				let _this = this;
				if (!_this.onCheckLogin()) {
					return false;
				}
				_this.saveFormId(e.detail.formId);
				uni.navigateTo({
					url: '/pages/user/coupon/coupon'
				})
			},
			/**
			 * 跳转版更新頁面
			 */
			onupdataAPP(e) {
				uni.navigateTo({
					url: '/pages/updataAPP/updataAPP'
				})
			},
			/**
			 * 跳转到登录页
			 */
			onLogin() {
				//#ifdef MP-WEIXIN
				this.wxlogin();
				return;
				//#endif

				uni.navigateTo({
					url: '/pages/login/login',
				});
			},


			xcxlogin: function(loginRes, infoRes) {
				let _this = this;
				_this._post_form('user/login_uniapp?type=2&code=' + loginRes.code, {
					code: loginRes.code,
					user_info: JSON.stringify(infoRes.userInfo),
					encrypted_data: JSON.stringify(infoRes.encryptedData),
					iv: JSON.stringify(infoRes.iv),
					signature: JSON.stringify(infoRes.signature),
					referee_id: uni.getStorageSync('referee_id')
				}, function(result) {
					console.log(result.data.token);
					// return false;
					// 记录token user_id
					console.log(result.data.token);
					uni.setStorageSync('token', result.data.token);
					uni.setStorageSync('user_id', result.data.user_id);
					console.log('登陆成功');
					// 跳转回原页面/
					// _this.navigateBack();
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, false, function() {
					uni.hideLoading();
				});
			},
			/**
			 * 验证是否已登录
			 */
			onCheckLogin() {
				let _this = this;
				if (!_this.isLogin) {
					_this.showError('很抱歉，您还没有登录');
					return false;
				}
				return true;
			},


		}
	}
</script>
<style>
	/* 用户信息 */

	.header1 {
		width: 66px;
		height: 66px;
		border-radius: 50%;
	}

	.user {
		position: relative;
		background: #fff;
		margin-bottom: 145upx;
	}

	.user-header {
		display: flex;
		padding-top: 1px;
		width: 100%;
		height: 310upx;
		align-content: center;
		background-color: #1fc616;
		background-repeat: no-repeat;
		background-position: center right;
		background-size: auto 100%;
		background-image: url('../../static/img/user-bg.png');
	}

	.user-header .user-header-cont {
		display: flex;
		margin: auto;
		margin-bottom: 135upx;
		width: 79%;
		align-items: center;
	}

	.user-header .user-header-cont .user-header-avatar {
		display: block;
		margin-right: 30upx;
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		/* border: 5upx solid #fff; */
		overflow: hidden;
	}

	.user-header .user-header-cont-name {
		font-size: 32upx;
	}

	.user-header .user-header-cont .user-header-avatar image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.user-header .user-header-cont .user-header-cont-name {
		font-size: 32rpx;
		padding: 20rpx 0;
	}


	/* 会员等级 */

	.user-header-grade {
		background: #fff199;
		margin-top: 12upx;
		height: 38upx;
		line-height: 38upx;
		border-radius: 10upx;
		padding: 0 14upx;
	}

	/* .user-header-grade .user-grade_icon {
  margin-top: -5upx;
} */

	.user-header-grade .user-grade_icon image {
		display: block;
		width: 32upx;
		height: 30upx;
	}

	.user-header-grade .user-grade_name {
		margin-left: 8upx;
		font-size: 24upx;
	}

	/* 订单导航栏 */

	.order-navbar {
		position: absolute;
		left: 19upx;
		bottom: -125upx;
		margin: auto;
		padding: 15upx 0;
		width: 95%;
		box-shadow: 0 1upx 5upx 0px rgba(0, 0, 0, 0.05);
		font-size: 30upx;
		border-top: 1upx solid #eee;
		border-radius: 5upx;
		background: #fff;
	}

	.order-navbar-header {
		margin: auto;
		padding-bottom: 10upx;
		width: 91%;
		height: 70upx;
		border-bottom: 1px solid #eee;
		justify-content: space-between;
		align-items: center;
	}

	.order-navbar-footer {
		width: 100%;
		padding: 10upx 0px;
	}

	.order-navbar-footer .order-navbar-item .order-navbar__icon {
		text-align: center;
		margin: 0 auto;
		display: block;
		padding: 10upx 0;
		color: #000;
		font-size: 36upx;
	}

	.order-navbar-footer .order-navbar-item .order-navbar__name {
		display: block;
		font-size: 24upx;
		color: #666;
		text-align: center;
		margin-right: 10upx;
	}

	.order-navbar-footer .order-navbar-item .order-badge {
		position: absolute;
		top: 0;
		right: 55upx;
		font-size: 22upx;
		background: #ff495e;
		text-align: center;
		line-height: 28upx;
		color: #fff;
		border-radius: 100%;
		min-height: 30upx;
		min-width: 30upx;
		padding: 1upx;
	}

	/* 菜单列表 */

	.menus-list {
		margin-top: 20upx;
	}

	.menus-list .menus-item {
		position: relative;
		padding: 28upx 28upx;
		border-bottom: 1upx solid #eee;
	}

	.menus-list .menus-item .menus-item__name {
		color: #444;
		margin-left: 20upx;
	}

	/* 我的钱包 */

	.my-asset {
		background: #fff;
		/* height: 70upx; */
		padding: 26upx 0;
	}

	.my-asset .asset-right {
		width: 210upx;
		border-left: 1upx solid #eee;
	}

	.asset-right_item {
		text-align: center;
		color: #666;
	}

	.asset-right_item .item-icon text {
		font-size: 36upx;
	}

	.asset-right_item .item-name {
		margin-top: 10upx;
	}

	.asset-right_item .item-name text {
		font-size: 25upx;
	}

	.asset-left_item {
		text-align: center;
		color: #666;
		padding: 0 60upx;
	}

	.asset-left_item .item-value text {
		font-size: 32upx;
		color: red;
	}

	.asset-left_item .item-name {
		margin-top: 6upx;
	}

	.asset-left_item .item-name text {
		font-size: 25upx;
	}
</style>
